<template>
	<view class="layout">
		<view class="content">

			<view class="scrollView" v-for="item in listArr" :key="item._id">
				<view class="item">
					<view class="infoList">
						<view class="info">
							<text>文件名称：</text>
							<text>{{ item.wordBankId }}</text>
						</view>
						<view class="info">
							<text>词库标题：</text>
							<text>{{ item.title }}</text>
						</view>
					</view>
					<view class="itemBottom">
						<view class="deleteBtn" @click="deleteFile(item._id, item.url)">
							删除词库
						</view>
					</view>
				</view>
			</view>
		
		</view>
	</view>
</template>

<script setup>
	import { onLoad } from '@dcloudio/uni-app';
	import { ref } from 'vue';
	
	const listArr = ref([])
	
	// let fileList = []

	onLoad(()=>{
		getData()
	})
	
	function getData() {
		uniCloud.callFunction({
			name: "getWordBanks",
		}).then(res => {
			listArr.value = res.result.data
		})
	}
	
	async function deleteFile(id, url) {
		let fileList = []
		fileList.push(url);
		uni.showModal({
			title:"删除词库",
			content:"确认删除该词库吗？",
			success(res) {
				if(res.confirm) {
					uni.showLoading({
						title: "正在删除",
						mask: true
					})
					uniCloud.callFunction({
						name: "delete-file",
						data: {
							id,
							fileList
						}
					}).then(res => {
						console.log(res)
						getData()
						uni.hideLoading()
					})
					
					
				}
			}
		})


	}
</script>

<style lang="scss">
	.layout{
		position: relative;
		.content{
			padding: 20rpx;
			.scrollView{
				font-size: 40rpx;
				.item{
					background-color: white;
					margin: 20rpx 0;
					padding: 20rpx;
					.infoList{
						display: flex;
						flex-direction: column;
						gap: 20rpx;
						.info{
							
						}
					}
					.itemBottom{
						margin-top: 20rpx;
						display: flex;
						justify-content: flex-end;
						gap: 30rpx;
						.deleteBtn{
							background-color: #F6465D;
							padding: 20rpx 40rpx;
							border-radius: 15rpx;
							color: white
						}
					}

				}
			}
		}
	}
</style>
